<template>
  <a-card>
    <!-- 操作区域 -->
    <template #extra>
      <a-button
        style="margin-right: 10px"
        v-if="isEdit"
        @click="onCancelEdit"
      >取消编辑</a-button
      >
      <a-button
        type="primary"
        style="margin-right: 10px"
        @click="onEdit"
        v-if="!isEdit"
      >编辑</a-button
      >
      <a-button type="primary" @click="onSubmit" v-if="isEdit">提交</a-button>
      <a class="ant-btn ant-btn-primary" @click="downloadFile">查看合并文档</a>

      <div>
        <a-modal v-model:visible="visible" title="选择申请日期" @ok="handleOk">
          <a-date-picker :format="dateFormat" @change="doChange"/>
        </a-modal>
      </div>
    </template>

    <!-- 主体 -->
    <a-descriptions bordered>
      <a-descriptions-item label="工程概况" :span="1">
        <div v-if="isEdit">
          <a-upload action="http://localhost:9292/api/sys/oss/upload?bcpath=ysjh"
                    :multiple="false" :headers="headers" @change="handleChange" accept=".doc, .docx">
            <a-button type="primary" size="small" @click="doChangeFile('gcgk')">
              <upload-outlined></upload-outlined>
              上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <a :href="`${http}/api/sys/oss/download?id=${rowState.gcgkid}`">
            {{rowState.gcgkuang}}
          </a>
        </div>

      </a-descriptions-item>
      <a-descriptions-item label="工程项目划分" :span="2">
        <div v-if="isEdit">
          <a-upload action="http://localhost:9292/api/sys/oss/upload?bcpath=ysjh"
                    :multiple="false" :headers="headers" @change="handleChange" accept=".doc, .docx">
            <a-button type="primary" size="small" @click="doChangeFile('gcxmhf')">
              <upload-outlined></upload-outlined>
              上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <a :href="`${http}/api/sys/oss/download?id=${rowState.gcxmhfid}`">
            {{rowState.gcxmhf}}
          </a>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="工程建设总进度计划" :span="1">
        <div v-if="isEdit">
          <a-upload action="http://localhost:9292/api/sys/oss/upload?bcpath=ysjh"
                    :multiple="false" :headers="headers" @change="handleChange" accept=".doc, .docx">
            <a-button type="primary" size="small" @click="doChangeFile('gcjszjdjh')">
              <upload-outlined></upload-outlined>
              上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <a :href="`${http}/api/sys/oss/download?id=${rowState.gcjszjdjhid}`">
            {{rowState.gcjszjdjh}}
          </a>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="法人验收工作计划" :span="2">
        <div v-if="isEdit">
          <a-upload action="http://localhost:9292/api/sys/oss/upload?bcpath=ysjh"
                    :multiple="false" :headers="headers" @change="handleChange" accept=".doc, .docx">
            <a-button type="primary" size="small" @click="doChangeFile('frysgzjh')">
              <upload-outlined></upload-outlined>
              上传
            </a-button>
          </a-upload>
        </div>
        <div v-else>
          <a :href="`${http}/api/sys/oss/download?id=${rowState.frysgzjhid}`">
            {{rowState.frysgzjh}}
          </a>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>
<script setup>
  import { ref, toRaw } from "vue";
  import global from "../global/global.vue";
  import {page, save, fileMerge} from '@/api/module/xmys_ysjh';
  import { v4 as uuidv4 } from "uuid";
  import { message } from "ant-design-vue";

  const http = process.env.VUE_APP_API_BASE_URL;

  // 项目id
  const projectId = global.xmid;

  const isEdit = ref(false);

  const editPageState = ref({});

  const pageState = ref({});

  const rowState = ref({
    gcgkid: '',
    gcgkuang: '',

    gcxmhfid: '',
    gcxmhf: '',

    gcjszjdjhid: '',
    gcjszjdjh: '',

    frysgzjhid: '',
    frysgzjh: '',
  })

  page({'xmid': projectId}).then((response) => {
    pageState.value = response.data;
    if (null != response.data){
      rowState.value.gcgkid = response.data.map.gcgk.id
      rowState.value.gcgkuang = response.data.map.gcgk.name

      rowState.value.gcxmhfid = response.data.map.gcxmhf.id
      rowState.value.gcxmhf = response.data.map.gcxmhf.name

      rowState.value.gcjszjdjhid = response.data.map.gcjszjdjh.id
      rowState.value.gcjszjdjh = response.data.map.gcjszjdjh.name

      rowState.value.frysgzjhid = response.data.map.frysgzjh.id
      rowState.value.frysgzjh = response.data.map.frysgzjh.name
    }
  })

  // 点击编辑
  const onEdit = () => {
    isEdit.value = true;
    let random = uuidv4().replaceAll("-", "");
    if (null == pageState.value){
      let addData = {
        id: random,
        xmid: projectId,
        gcgkuang: '',
        gcxmhf: '',
        gcjszjdjh: '',
        frysgzjh: '',
      }
      pageState.value = addData;
    }
    editPageState.value = Object.assign({}, pageState.value);
  }

  // 点击取消
  const onCancelEdit = () => {
    isEdit.value = false;
  };

  const onSubmit = async () => {
    save(toRaw(editPageState.value)).then((response) => {
      if(response.success){
        message.success({ content: '提交成功', duration: 1 })
        $("#reloadbtn").click();
      }else{
        message.error({ content: '提交失败', duration: 1 })
      }
    }).catch(error => {
      console.log('error', error);
    });
  }

  //文件上传
  const tokenKey = localStorage.getItem("token_key");
  const token = localStorage.getItem("token")
  const headers = {
    "Authorization": token,
    "Authorization-key": tokenKey
  };
  const handleChange = info => {
    let resFileList = [...info.fileList];
    let fileids = "";
    resFileList.map(file => {
      if (file.response) {
        file.url = file.response.data.path;
        if(fileids.length > 0){
          fileids += "," + file.response.data.id;
        } else {
          fileids += file.response.data.id;
        }
      }
      return file;
    });
    if ("gcgk" === changeFileCol)
      editPageState.value.gcgkuang = fileids;
    if ("gcxmhf" === changeFileCol)
      editPageState.value.gcxmhf = fileids;
    if ("gcjszjdjh" === changeFileCol)
      editPageState.value.gcjszjdjh = fileids;
    if ("frysgzjh" === changeFileCol)
      editPageState.value.frysgzjh = fileids;

  }
  let changeFileCol;
  const doChangeFile = (col) => {
    changeFileCol = col;
  }

  const visible = ref(false);

  const dateFormat = 'YYYY年MM月DD日';

  const downloadFile = () => {
    if (null == pageState.value){
      message.error({ content: '暂未上传资料！', duration: 1 })
      return false;
    }
    visible.value = true;
  }

  let yearMonthDate;

  const doChange = (value, dateString) => {
    yearMonthDate = dateString;
  }

  const handleOk = e => {
    visible.value = false;
    fileMerge({"id": pageState.value.id, "yearMonthDate": yearMonthDate}).then((response) => {
      if (response.success){
        window.location.href = http +"/api/sys/oss/download?id="+ response.data.id;
      }
    })
  };

</script>

<style lang="less" scoped>
.excel-upload-input {
  display: none;
}
:deep(.ant-descriptions-item-label){
  width: 200px;
}
</style>
